<template>
	<van-popup
		class="modal-transparent"
		v-model:show="show"
		:close-on-click-overlay="false"
		teleport="body"
	>
		<div class="modal-close">
			<div class="icon" @click="close"></div>
		</div>
		<div class="modal-container">
			<div class="main">
				<div class="title">{{ $t("Withdrawal options") }}</div>
				<div class="content">
					{{$t('Due to $m payment limit',[{msg:'$m',val:type}])}}.{{
						$t(
							"To avoid you waiting too long.Recommend you to choose other redemption methods"
						)
					}}.
				</div>
			</div>
			<div class="footer">
				<div
					v-if="vueState.countryInfo.country === 'IN'"
					class="button gift-card"
					@click="clickToGift"
				>
					<span class="icon"></span>{{ $t("Flipkart Gift Card") }}
				</div>
				<div class="button recharge" @click="clickToRecharge">
					<span class="icon"></span>{{ $t("To charge") }}
				</div>
				<div
					:class="['withdraw', { active: active }]"
					@click="clickToWithdraw"
				>
					{{ $t("Withdraw to") }} {{ type }}
				</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
import { inject } from "vue";
export default {
	props: ["show", "type", "active"],
	setup(props, ctx) {
		const vueState = inject("vueState");
		const close = () => {
			ctx.emit("update:show", false);
		};
		const clickToWithdraw = () => {
			ctx.emit("clickToWithdraw");
		};
		const clickToRecharge = () => {
			ctx.emit("clickToRecharge");
		};
		const clickToGift = () => {
			ctx.emit("clickToGift");
		};
		return {
			vueState,
			close,
			clickToGift,
			clickToRecharge,
			clickToWithdraw,
		};
	},
};
</script>
<style lang="less" scoped>
.coin-num {
	display: inline-block;
	background: url(../../assets/images/icon_coin.svg) no-repeat left center;
	background-size: 0.2rem 0.2rem;
	padding-left: 0.22rem;
	font-size: 0.17rem;
	font-weight: 500;
	color: #f94200;
	line-height: 0.24rem;
	vertical-align: middle;
}
.rupee-color {
	color: #657221;
}
.high-light {
	color: #f94200;
}
.modal {
	&-close {
		display: flex;
		justify-content: flex-end;
		.icon {
			margin-bottom: 0.12rem;
			height: 0.3rem;
			width: 0.3rem;
			background: url(../../assets/images/Modal/modal_close_white.svg)
				no-repeat center;
			background-size: contain;
		}
	}
	&-container {
		width: 3.11rem;
		border-radius: 0.16rem;
		background: url(../../assets/images/Modal/options_header.png) no-repeat
			top center;
		background-size: 100%;
		background-color: white;
		padding: 1.11rem 0 0.28rem;
		& > .main {
			padding: 0.16rem 0.2rem 0;
			.title {
				text-align: center;
				font-size: 0.2rem;
				font-weight: 700;
				line-height: 0.32rem;
				color: #121314;
			}
			.content {
				margin-top: 0.04rem;
				font-size: 0.14rem;
				font-weight: 400;
				line-height: 0.24rem;
				color: #9c9da6;
				text-align: center;
			}
		}
		& > .footer {
			margin-top: 0.32rem;
			.withdraw {
				margin-top: 0.14rem;
				font-size: 0.14rem;
				font-weight: bold;
				text-align: center;
				line-height: 0.24rem;
				color: #9c9da6;
				&.active {
					color: @theme-color;
				}
			}
			.button {
				height: 0.46rem;
				width: 2.47rem;
				margin: 0 auto;
				.unique-button();
				box-shadow: none;
				font-size: 0.16rem;
				.icon {
					height: 0.24rem;
					width: 0.24rem;
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					margin-right: 0.08rem;
				}
				&.gift-card {
					.icon {
						background-image: url(../../assets/images/icon_gift_card.svg);
					}
				}
				&.recharge {
					background-color: white;
					color: @theme-color;
					border: 0.01rem solid @theme-color;
					font-weight: bold;
					.icon {
						background-image: url(../../assets/images/icon_phone_green.svg);
					}
				}
				& + .button {
					margin-top: 0.12rem;
				}
			}
		}
	}
}
</style>